:root {
  --ui-font-family: inter, -apple-system, "BlinkMacSystemFont", "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-primary: #409EFF;
  --ui-font-size-lt: 10px; //little
  --ui-font-size-sm: 12px; //small
  --ui-font-size-base: 14px; //base
  --ui-font-size-semi-lg: 14px; //semi-lg
  --ui-font-size-lg: 15px; //large
  --ui-font-size-semi-xl: 16px; //semi-xl
  --ui-font-size-xl: 17px; //xl
  --ui-font-size-semi-2xl: 19px; //semi-2xl
  --ui-font-size-2xl: 21px; //2xl
  --ui-font-size-title: 22px; //title
  --ui-font-size-os: 28px; //outsize
  --ui-font-weight-300: 300;
  --ui-font-weight-400: 400;
  --ui-font-weight-base: 500;
  --ui-font-weight-semibold: 600;
  --ui-font-weight-bold: 700;
  --ui-font-weight-extrabold: 800;
  --ui-font-weight-black: 900;
}

.loc-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.loc-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loc-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}



// 按钮的公共样式
// 取消按钮
.cancel-btn {
  outline: none;
  color: #e41717;
  background-color: #fff;
  border-color: #e41717;
  border-radius: 8px;

  &:hover,
  &:active,
  &:focus {
    color: #eb5f5f;
    background-color: #fff;
    border-color: #eb5f5f;
  }
}

// 信息按钮
.info-btn {
  outline: none;
  color: var(--color-primary);
  background-color: #fff;
  border-color: var(--color-primary);
  border-radius: 8px;

  &:hover,
  &:active,
  &:focus {
    color: #5fb3eb;
    background-color: #fff;
    border-color: #5fb3eb;
  }
}

// 提交按钮
.submit-btn {
  outline: none;
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 8px;

  &:hover {
    color: #fff;
    background-color: #9acbf3;
    border-color: #9acbf3;
  }

  &:active {
    color: #fff;
    background-color: #619ac8;
    border-color: #619ac8;
  }

  &:focus {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
}

// 新增按钮
.add-btn {}

// 删除按钮
.delete-btn {}

// 修改第三方组件的样式
/* 修改弹框popover的样式 */
.common-popover {
  &.el-popover {
    min-width: 90px;
    border-radius: 10px;
    padding: 8px 15px;
    text-align: center;

    & .el-popover__title {
      margin-bottom: 0;
      font-size: 14px;
    }
  }

  &.el-popper[x-placement^=bottom] {
    margin-top: 5px;
  }
}

.dataType-popover {
  &.el-popover {
    margin-left: 0px;
    max-height: 350px;
    overflow-y: auto;

    & .el-popover__title {
      color: #9e73ee;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      letter-spacing: 3px;
      padding: 5px 0;
      margin-bottom: 5px;
    }
  }
}

.scroll-popover {
  &.el-popover {
    max-height: 250px;
    overflow-y: auto;
  }
}

.common-dialog {
  border: 1px solid var(--ui-border-color-base);
  border-radius: 8px;

  &.el-dialog__title {
    color: rgba(16, 24, 40, 0.8);
  }

  & .el-dialog__headerbtn:hover {
    background-color: rgba(16, 24, 40, 0.04);

    .el-icon-close:before {
      color: rgba(16, 24, 40, 0.8);
    }
  }

  & .el-form--label-top .el-form-item__label {
    color: rgba(16, 24, 40, 0.8);
  }

  & .el-input__inner {
    border-color: #eaecf0;
    outline: none;
  }

  & .el-input__inner:hover,
  & .el-input__inner:active,
  & .el-input__inner:focus {
    border-color: #d0d5dd;
  }

  & .el-upload {
    width: 100%;
  }
}

// 筛选树节点的输入框样式
.filter-input {
  .el-input__inner {
    background-color: rgba(86, 87, 88, 0.04);
    border-radius: 8px;
  }
}

// 枚举表格中的输入框
.enum-input {
  .el-input__inner {
    height: 28px !important;
    line-height: 28px !important;
    padding: 6px 5px !important;
    border: none !important;
  }
}

// 枚举表格样式
.enum-table {

  /* 设置表头样式 */
  &.el-table .el-table__header-wrapper th {
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 !important;
    background: #fff !important;
    color: #667085 !important;
  }

  /* 设置表格行样式*/
  &.el-table td.el-table__cell {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    background: #fff !important;

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 !important;
    }
  }
}

// jsonschema中el-tag样式
// .json-schema-tag {
//   &.el-tag {
//     color: var(--color-primary);
//     border-color: rgba(147, 115, 238, 0.08);
//     background: rgba(147, 115, 238, 0.08)
//   }
// }

// 树的样式
.common-tree {

  /* 原有的箭头 去掉 */
  &.el-tree .el-icon svg {
    display: none !important;
    height: 0;
    width: 0;
  }

  /* 引入的图标（图片）size大小 => 树节点前的预留空间大小 */
  &.el-tree-node__expand-icon {
    font-size: 16px;
  }

  /* 图标是否旋转，如果是箭头类型的，可以设置旋转90度。如果是两张图片，则设为0 */
  &.el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* 未展开的节点 */
  &.el-tree .el-tree-node__expand-icon:before {
    font-family: FontAwesome;
    content: "\f105";
    color: #667085;
    display: block;
    width: 18px;
    height: 18px;
  }

  /* 展开的节点 */
  &.el-tree .el-tree-node__expand-icon.expanded:before {
    font-family: FontAwesome;
    content: "\f107";
    color: #667085;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 4px;
  }

  /* 叶子节点（不显示图标） */
  &.el-tree .is-leaf.el-tree-node__expand-icon::before {
    display: block;
    background: none !important;
    content: "";
    width: 18px;
    height: 18px;
  }

  & .el-tree-node__content {
    margin-bottom: 2px;
  }

  /* 鼠标划过树节点的颜色 */
  & .el-tree-node__content:hover {
    background-color: #f5f7fa94;
    border-radius: 8px;
  }

  /* 修改树高亮的样式 */
  &.el-tree--highlight-current .el-tree-node.is-current.is-focusable>.el-tree-node__content {
    background-color: #f2f4f7;
    border-radius: 8px;
  }

  /* 修改树节点聚焦的样式 */
  & .el-tree-node:focus>.el-tree-node__content {
    background-color: transparent;
  }
}

// 按钮组的样式
// .common-radio-group {
//   .el-radio-button {
//     // width: 130px;
//   }

//   .el-radio-button__inner {
//     // width: 130px;
//     text-align: center;
//     border-color: #dcdfe6;
//   }

//   .el-radio-button__inner:hover {
//     color: #606266;
//   }

//   .el-radio-button__orig-radio:checked+.el-radio-button__inner {
//     // width: 130px;
//     background-color: var(--app-primary-base);
//     border-color: var(--app-primary-base);
//     color: #fff;
//     box-shadow: none;
//   }
// }

.float-right {
  float: right;
}

* {
  font-family: 'latin.woff2';
}

.big-title {
  font-size: var(--ui-font-size-title);
  font-weight: bold;
}

.title {
  font-size: var(--ui-font-size-title);
  font-weight: bold;
}

.small-title {
  font-size: var(--ui-font-size-xl);
  font-weight: bold;
  display: flex;
  align-items: center;
}

.title-line {
  width: 4px;
  height: 18px;
  background-color: var(--app-primary-base);
  border-radius: 5px;
  margin-right: 5px;
}

.hidden-height {
  // flex: none;
  // height: 0px;
  min-height: 0px !important;
  max-height: 0px !important;
  overflow: hidden !important;
  transition: all 0.5s ease !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.margin-right-10 {
  margin-right: 10px;
}

.margin-left-10 {
  margin-left: 10px;
}

.width100 {
  width: 100px;
}

.width150 {
  width: 150px;
}